<template>
    <el-row>
        <ToStockDetail v-if="stock" :stock="stock"></ToStockDetail>
        <el-button v-if="date">{{ date }}</el-button>
        <el-button v-if="type">{{ type }}</el-button>
    </el-row>

    <el-table :data="state.data" height="700" 
    :default-sort="state.sort"
    @sort-change="sortChange"
    @cell-click="cellClick"
    :cell-class-name="tableCellClassName"
    style="width: 100%">
        <el-table-column type="index" width="60"/>
        <el-table-column prop="date" label="日期" sortable width="230">
            <template #default="scope">
                <DateOperationComponent :mdata="scope.row" />
            </template>
        </el-table-column>
        <el-table-column prop="close" label="价格" width="100"/>
        <el-table-column prop="toDisplay" label="toDisplay" width="120">
            <template #default="scope">
                <ToDisplay :stock="scope.row.stock" :date="scope.row.date" :content="'d'"/>
                <ToMeanLine :stock="scope.row.stock" :date="scope.row.date" :content="'m'"/>
            </template>
        </el-table-column>
        <el-table-column prop="drawdown" label="drawdown" sortable width="100"/>
        <el-table-column prop="weekPct" label="周涨跌" sortable width="100"/>
        <el-table-column prop="pctSum" label="涨幅和" sortable width="100">
            <template #default="scope">
                {{ numberFormat(scope.row.pctSum, 2) }}
            </template>
        </el-table-column>
        <el-table-column prop="incNum" label="incNum" sortable width="100"/>
        <el-table-column prop="lp" label="分位点" sortable width="100"/>
        <el-table-column prop="relLP" label="相对分位点" sortable width="100"/>
        <el-table-column prop="gb20wPct" label="20W" width="80" sortable/>
        <el-table-column prop="gb30wPct" label="30W" width="80" sortable/>
        <el-table-column prop="disPct" label="60W" width="80" sortable/>
        <el-table-column prop="display" label="display" sortable width="100"/>
        <el-table-column prop="display60w" label="display60w" sortable width="100"/>
    </el-table>

    <el-drawer v-model="drawer"  :with-header="false" size="800px">
        <DailyWeekDateCompentent :stock="stock" :date="clickedDate" :key="clickedDate"></DailyWeekDateCompentent>
    </el-drawer>
</template>

<script setup>
// 个股周数据详情页
import { reactive, ref } from 'vue';
import { getWeekData } from '../service/week';
import { getLpClassName, numberFormat } from '../utils/help';
import DateOperationComponent from './DateOperationComponent.vue';
import ToStockDetail from './ToStockDetail.vue';
import DailyWeekDateCompentent from './element/DailyWeekDateCompentent.vue';
import { useRouteQuery } from '../utils/useRoute';
import ToDisplay from './element/ToDisplay.vue';
import ToMeanLine from './element/ToMeanLine.vue';

const base = "weekStockPctDisplay"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "weekStockDetailSortOrder"

const drawer = ref(false)

let stock = ref("")
let date = ref("")
let type = ref("")

stock.value = useRouteQuery("stock","")
date.value = useRouteQuery("date","")
type.value = useRouteQuery("type","")

const clickedDate = ref("")

const state = reactive({
    rawData: [],
    data : [],
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'date' , 
        order: sessionStorage.getItem(sortOrderKey) || 'descending' 
    }
})


const loadData = () => {
    getWeekData(stock.value).then(res => {
        state.rawData = res.data

        state.data = state.rawData.filter(item => {
            return item.date >= date.value
        })

        let basePrice = state.data[0].close
        let base60WPrice = state.data[0].mean300Close
        state.data.forEach(item => {
            item.display = numberFormat((item.close - basePrice) / basePrice * 100, 2)
            item.display60w = numberFormat((item.close - base60WPrice) / base60WPrice * 100, 2)
        })
    })
}

loadData()

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {

    let columnProperty = column.property
    let val = row[columnProperty]

    if (["weekPct", "deSum","yearLineDecrease", "pctSum","display","display60w"].includes(columnProperty)) {
        if (val < 0) {
            return 'lt0-cell'
        }
    }

    if (columnProperty == "lp") {
        return getLpClassName(val)
    }

    if (columnProperty == "relLP") {
        if (val <= 1) {
            return 'rellplt1-cell'
        }
    }

    if (["w15DisPct", "disPct","gb20wPct","gb30wPct"].includes(columnProperty)) {
        if (val >= 0) {
            return 'd300up-cell'
        } else {
            return 'd300down-cell'
        }
    }

    if (columnProperty == "drawdown") {
        if (val == 0) {
            return 'd300down-cell'
        }
    }

    return ''
}

const cellClick = (row, column, cell, event) => { 
    let columnProperty = column.property
    let val = row[columnProperty]

    if (columnProperty == "close") {
        clickedDate.value = row.date 
        drawer.value = true;
    }
}
</script>

<style scope>
</style>